<template>
  <div>
    <el-row style="margin: 10px 0 10px 0" type="flex" justify="start">
      <el-col span="auto" style="margin-right: 5px">
        <el-avatar :src="fromUser.imgUrl" :size="45"></el-avatar>
      </el-col>
      <el-col>
        <el-row>
          <span style="font-weight: bold; color: #727272">{{fromUser.nickname}}</span>
        </el-row>
        <el-row class="box">
          <el-col span="auto">
            <span style="margin-right: 10px">{{comment.gmtCreate}}</span>
          </el-col>
          <el-col span="auto">
            <div @click="clickLike" style="margin-right: 5px">
              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path d="M594.176 151.168a34.048 34.048 0 0 0-29.184 10.816c-11.264 13.184-15.872 24.064-21.504 40.064l-1.92 5.632c-5.632 16.128-12.8 36.864-27.648 63.232-25.408 44.928-50.304 74.432-86.208 97.024-23.04 14.528-43.648 26.368-65.024 32.576v419.648a4569.408 4569.408 0 0 0 339.072-4.672c38.72-2.048 72-21.12 88.96-52.032 21.504-39.36 47.168-95.744 63.552-163.008a782.72 782.72 0 0 0 22.528-163.008c0.448-16.832-13.44-32.256-35.328-32.256h-197.312a32 32 0 0 1-28.608-46.336l0.192-0.32 0.64-1.344 2.56-5.504c2.112-4.8 5.12-11.776 8.32-20.16 6.592-17.088 13.568-39.04 16.768-60.416 4.992-33.344 3.776-60.16-9.344-84.992-14.08-26.688-30.016-33.728-40.512-34.944zM691.84 341.12h149.568c52.736 0 100.864 40.192 99.328 98.048a845.888 845.888 0 0 1-24.32 176.384 742.336 742.336 0 0 1-69.632 178.56c-29.184 53.44-84.48 82.304-141.76 85.248-55.68 2.88-138.304 5.952-235.712 5.952-96 0-183.552-3.008-244.672-5.76-66.432-3.136-123.392-51.392-131.008-119.872a1380.672 1380.672 0 0 1-0.768-296.704c7.68-72.768 70.4-121.792 140.032-121.792h97.728c13.76 0 28.16-5.504 62.976-27.456 24.064-15.104 42.432-35.2 64.512-74.24 11.904-21.184 17.408-36.928 22.912-52.8l2.048-5.888c6.656-18.88 14.4-38.4 33.28-60.416a97.984 97.984 0 0 1 85.12-32.768c35.264 4.096 67.776 26.88 89.792 68.608 22.208 42.176 21.888 84.864 16 124.352a342.464 342.464 0 0 1-15.424 60.544z m-393.216 477.248V405.184H232.96c-40.448 0-72.448 27.712-76.352 64.512a1318.912 1318.912 0 0 0 0.64 282.88c3.904 34.752 32.96 61.248 70.4 62.976 20.8 0.96 44.8 1.92 71.04 2.816z" p-id="3324" fill="#9499a0"></path></svg>
            </div>
          </el-col>
          <el-col span="auto" style="margin-right: 10px">
            {{comment.likeNumber}}
          </el-col>
          <el-col span="auto">
            <span class="reply" @click="replyBox = !replyBox">回复</span>
          </el-col>
          <el-col span="auto" v-show="isMine">
            <span class="reply" @click="deleteComment">删除</span>
          </el-col>
        </el-row>
        <!-- 评论内容 -->
        <el-card class="box-card" shadow="hover" style="margin-top: 10px">
          {{comment.content}}
        </el-card>
        <!-- 子级评论 -->
        <SubComment :comment="item" v-for="item in subComments"></SubComment>
        <!-- 回复父级评论 -->
        <el-row class="comment-area" v-show="replyBox">
          <el-col style="margin: 10px 10px 10px 0">
            <el-input type="textarea" v-model="reComment" :placeholder="'回复 @' + fromUser.nickname + ':'"></el-input>
          </el-col>
          <el-col style="flex: 1">
            <el-button type="primary" @click="replyFatherComment" class="item" :disabled="!reComment">发布</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import SubComment from "@/components/comment/SubComment";
import { deleteCommentById, flatChildByParentId, userLikeComment, userSendComment } from "@/api/post/comment";

export default {
  name: "CommentDetail",
  inject: ['reload'],
  components: { SubComment },
  props: {
    comment: Object
  },
  data() {
    return {
      userId: 0,
      fromUser: {},
      replyBox: false,
      isMine: false,
      subComments: [],
      reComment: ''
    }
  },
  methods: {
    replyFatherComment() {
      userSendComment({
        content: this.reComment,
        parentId: this.comment.id,
        postId: this.comment.postId,
        treeLevel: this.comment.treeLevel + 1,
        userId: this.userId
      }).then(res => {
        if(res.data.code === 200) {
          this.reload()
          this.$message.success(res.data.message)
        } else {
          // this.$message.error(res.data.message)
        }
      })
    },
    deleteComment() {
      deleteCommentById({
        id: this.comment.id
      }).then(res => {
        if(res.data.code === 200) {
          this.reload()
          this.$message.success(res.data.message)
        } else {
          // this.$message.error(res.data.message)
        }
      })
    },
    getSubComments() {
      flatChildByParentId({
        isLikeNumberSort: true,
        parentId: this.comment.id
      }).then(res => {
        if(res.data.code === 200) {
          this.subComments = res.data.flatChildCommentVOList
        } else {
          // this.$message.error(res.data.message)
        }
      })
    },
    clickLike() {
      userLikeComment({
        commentId: this.comment.id,
        userId: this.userId
      }).then(res => {
        if(res.data.code === 200) {
          this.comment.likeNumber = res.data.commentInfo.likeNumber
        } else {
          // this.$message.error(res.data.message)
        }
      })
    }
  },
  created() {
    this.userId = Number(JSON.parse(Cookies.get("user")).id)
    this.fromUser = this.comment.fromUser
    this.isMine = this.userId === this.fromUser.id
    this.getSubComments()
  }
}
</script>

<style lang="scss" scoped>
.box {
  margin-top: 6px;
  font-size: 12px;
  color: #727272;
}

.comment-area {
  display: flex;
  align-items: center;
}

.item {
  height: 50px;
}

.left {
  margin-right: 10px;
}

.reply {
  margin-right: 10px;
  color: #409EFF;
  cursor: pointer
}
</style>
